The Google team introduced significant improvements to Maps JavaScript API! They include an API for dynamic library loading, an inline bootstrap loader, as well as various performance enhancements.
Improved Library Loading
The Maps JavaScript API consists of libraries that developers include when loading the API. Previously, library loading was rigid, impacting initial loading times. Developers could only specify libraries during the initial load using parameters like ‘libraries=places‘ in the URL.
Now, an API allows libraries to be dynamically imported. For example:
await google.maps.importLibrary("places");)This loads the Places Library when necessary, such as after a user action triggers a need for place information. Moreover, lengthy namespaces like ‘google.maps.places.Place‘ can be avoided:
const {Place} = await google.maps.importLibrary("places");Multiple libraries can be imported concurrently:
const [placesLibrary, geocodingLibrary] = await Promise.all([
google.maps.importLibrary("places"),
google.maps.importLibrary("geocoding")
]);All Maps JavaScript API classes are accessible via google.maps.importLibrary(). For example, the StreetViewPanorama class is accessible using:
const {StreetViewPanorama} = await google.maps.importLibrary("streetView");Inline bootstrap loader
The traditional <script> loader for the Maps JavaScript API required defining a callback parameter to a global function. A new inline bootstrap loader is recommended, enabling immediate use of google.maps.importLibrary() without waiting for the API to load. This eliminates the need for global callbacks, allowing Promises or async/await for API readiness tracking.
Instead of a <script> tag with a URL, this inline bootstrap loader is a small piece of inline JavaScript. It employs your configuration parameters, constructs the bootstrap URL, and defines google.maps.importLibrary(), ensuring no API components load until google.maps.importLibrary() is first invoked.
The inline bootstrap loader is usable multiple times per page, though only the first configuration applies. Importantly, the google.maps.importLibrary() Promise correctly rejects on API loading issues, unlike the older callback method.
Performance enhancements
This year, multiple changes have been made to the Maps JavaScript API for improved user loading times. Brotli compression is applied to static JavaScript files, and offscreen maps are lazily loaded automatically. Further enhancements are planned, including modernizing JavaScript output to reduce file size by leveraging browser-built features.
Why <script> loader?
The Maps JavaScript API is distributed via <script> tags instead of npm distribution. This choice accommodates a broad range of websites, including those not actively maintained. Changes in browsers and backend services require updates, addressing accessibility, privacy, and security concerns. Direct loading from Google ensures automatic updates, avoiding unexpected disruptions. For a middle ground, the ‘@googlemaps/js-api-loader’ package bridges <script> loading and npm. The new google.maps.importLibrary() is compatible with js-api-loader via Loader.importLibrary().
If you’d like to learn more about Maps JavaScript API, contact our Google Maps experts!
Source: https://cloud.google.com/blog/products/maps-platform/more-control-loading-maps-javascript-api